import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from 'react-router-dom'
import './App.css'
// 导入antd样式
import 'antd/dist/antd.min.css'
import { isAuth } from './utils/token'
import { message, Spin } from 'antd'
import { lazy, Suspense } from 'react'
// 导入页面组件
// import Login from './page/Login'
// import Home from './page/Home'
// import NotFound from './page/404'
// 懒加载页面组件
const Login = lazy(() => import('./page/Login'))
const Home = lazy(() => import('./page/Home'))
const NotFound = lazy(() => import('./page/404'))

function App() {
  return (
    <Router>
      {/* 懒加载 */}
      <Suspense
        // 显示antd组件 加载中
        fallback={
          <div
            className="lazyLoad"
            style={{
              width: '100vw',
              height: '100vh',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Spin size="large" tip="拼命加载中..." />
          </div>
        }>
        <div className="App">
          <Switch>
            <Redirect exact from="/" to="/home" />
            <Route
              path="/home"
              render={() => {
                if (!isAuth()) {
                  message.error('请先进行登录!')
                  return (
                    <Redirect
                      to={{
                        pathname: '/login',
                      }}
                    />
                  )
                }
                return <Home />
              }}
            />
            <Route path="/login" component={Login} />
            <Route component={NotFound} />
          </Switch>
        </div>
      </Suspense>
    </Router>
  )
}

export default App
